import { Image, Text, View } from '@tarojs/components'
import { AtAvatar, AtGrid, AtIcon, AtTag } from 'taro-ui'
import { connect } from 'react-redux'
import React from 'react'
import Taro from '@tarojs/taro'
import './User.scss'
import { getToken, getUser, setUser } from '../../actions/user'
import { loginWXMP, refershToken } from '../../actions/login'

class User extends React.Component{

  goBatteryOrder () {
    Taro.navigateTo({
      url: '/pages/order/BatteryOrder'
    })
  }

  goRentCarOrder () {
    Taro.navigateTo({
      url: '/pages/order/RentCarOrder'
    })
  }

  onGridClick (item, index) {
    switch(index) {
      case 0:
        Taro.navigateTo({
          url: '/pages/distribution/Distribution'
        })
        break
      case 1:
        Taro.navigateTo({
          url: '/pages/auth/BindMobile'
        })
        break
      default:
        break
    }
  }

  render () {
    return (
      <View className='user-container' style='display: flex; flex-direction: column; align-items: center;height: 100%;'>
        <View className='user-top'>
          <View className='user-detail'>
            <AtAvatar
              image={this.props.user.user.userInfo.avatarUrl}
              circle
            >
            </AtAvatar>
            <View style='margin-top: 2rem;'>
              <Text>
                {this.props.user.user.userInfo.nickName}
              </Text>
            </View>
          </View>
          <View style='width: 100%; margin-top: 2rem;'>
            <View style='display: flex; justify-content: center; align-items: center;'>
              <View style='text-align: center; flex: 1;' onClick={this.goBatteryOrder.bind(this)}>
                <AtIcon color='#6190E8' prefixClass='icon' value='shandian' size='30'></AtIcon>
                <View>
                  换电订单
                </View>
              </View>

              <View style='text-align: center; flex: 1;' onClick={this.goRentCarOrder.bind(this)}>
                <AtIcon color='#6190E8' prefixClass='icon' value='dianpingche' size='30'></AtIcon>
                <View>
                  租车订单
                </View>
              </View>
            </View>
          </View>
        </View>
        
        <View className='user-bottom'>

          {/* <Text>
            感谢选择爱骑出行
          </Text> */}

          <AtGrid
            onClick={this.onGridClick.bind(this)}
            data={
            [
              {
                image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
                value: '填写邀请码'
              },
              {
                image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
                value: '绑定手机'
              },
              {
                image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
                value: '敬请期待'
              },
              // {
              //   image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
              //   value: '领会员'
              // },
              // {
              //   image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
              //   value: '新品首发'
              // },
              // {
              //   image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
              //   value: '领京豆'
              // },
              // {
              //   image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
              //   value: '手机馆'
              // }
            ]
          } />
        </View>
      </View>
    )
  }

}

// 将 reducer 中的状态插入到组件的 props 中
// 下面是单个reducer的时候，多个的时候需要选传入哪个reducer
// const { test, count } = state
const mapStateToProps = (state) => ({
  user: state.user,
  login: state.login,
  cabinets: state.cabinets.cabinets,
  detailLogin: state.cabinets.detailLogin,
  cabinet: state.cabinets.cabinet
})

// 将 对应action 插入到组件的 props 中
const mapDispatchToProps = (dispatch) => ({
  getUser () {
    dispatch(getUser())
  },
  getToken () {
    dispatch(getToken())
  },
  setUser (user) {
    dispatch(setUser(user))
  },
  refershToken (token) {
    dispatch(refershToken(token))
  },
  toLogin () {
    dispatch(loginWXMP())
  }
})

// 使用 connect 高阶组件对 Counter 进行包裹
export default connect(mapStateToProps, mapDispatchToProps)(User);